<template>
  <div>
    <p>is属性的作用是：
      1.将属性值对应的组件渲染到页面内;
      2.使得组件的嵌套符合w3c规范
    </p>
    <ul>
      <li is="com-li"></li>
    </ul>
    <hr>
    <!-- comName这个变量的变化会引起组件的变化，所以叫动态组件 -->
    <button @click="toggle">登录/注册</button>
    <!-- keep-alive组件的作用：对于需要频繁切换的组件，可以保持状态，不被销毁，进而提升性能 -->
    <keep-alive>
      <div :is="comName"></div>
    </keep-alive>
  </div>
</template>

<script>
import comLi from './comLi.vue'
import comLogin from './comLogin.vue'
import comReg from './comReg.vue'
export default {
  data() {
    return {
      comName: 'com-login'
    }
  },
  components: {
    comLi,
    comLogin,
    comReg
  },
  methods: {
    toggle(){
      this.comName==='com-login' ? this.comName ='com-reg' : this.comName ='com-login'
    }
  } 
}
</script>

<style>

</style>